<template>
  <el-form label-width="80px" :model="configForm" ref="configFormRef" :rules="configRulesForm">
    <div class="card-header">
      <div class="column"></div>
      <span style="font-size: 18px">单量配置</span>
    </div>
    <el-form-item label-width="150px" label="每日订单量(单位/单)" prop="orderNum">
      <el-input v-model="configForm.orderNum" style="width: 120px" oninput="value = value.replace(/[^\d]/g, '')"/>
      <el-checkbox style="margin-left: 15px" :true-label="1" :false-label="0" v-model="configForm.orderNumType">
        包含老客订单量
      </el-checkbox>
    </el-form-item>
    <div class="card-header">
      <div class="column"></div>
      <span style="font-size: 18px">进件配置</span>
    </div>
    <el-form-item label-width="120px" label="每日进件时间">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-time-select
              style="width: 100%;"
              placeholder="起始时间"
              v-model="configForm.loanStartTime"
              start='00:00'
              end='23:59'
          >
          </el-time-select>
        </el-col>
        <el-col :span="1" style="text-align: center">-</el-col>
        <el-col :span="8">
          <el-time-select
              style="width: 100%;"
              placeholder="结束时间"
              v-model="configForm.loanEndTime"
              start='00:00'
              end='23:59'
          >
          </el-time-select>
        </el-col>
      </el-row>
    </el-form-item>
    <div class="card-header">
      <div class="column"></div>
      <span style="font-size: 18px">上架扶持</span>
    </div>
    <el-form-item label-width="120px" label="扶持截至日期" prop="supportDay">
      <el-date-picker
          v-model="configForm.supportDay"
          value-format="YYYY-MM-DD"
          type="date"
          :disabled-date="(time)=>{
           return time.getTime() <  (Date.now() - (24 * 60 * 60 * 1000));
          }"
          placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label-width="120px" label="扶持分数" prop="supportScore">
      <el-input style="width: 220px" oninput="value = value.replace(/[^\d]/g, '')" v-model="configForm.supportScore"/>
    </el-form-item>
  </el-form>
</template>

<script>
import {reactive, ref, toRefs, watch} from "vue";
import {updateProductConfig} from '@/api/product'
import {ElMessage} from "element-plus";

export default {
  name: "comprehensiveConfig",
  props: {
    config: Object
  },
  setup(props) {
    const configFormRef = ref(null)
    const state = reactive({
      configForm: {
        loanStartTime: null,
        loanEndTime: null,
        orderNum: null,
        orderNumType: 0,
        supportDay: '',
        supportScore: 0,
      },
      configRulesForm: {
        orderNum: [
          {required: true, message: '请输入单量', trigger: 'blur'},
          {
            required: true, validator: (rule, value, callback) => {
              if (parseInt(value) <= 0) {
                return callback(Error('必须大于零'))
              }
              return callback()
            }
          }
        ]
      }
    })
    watch(() => props.config, (value) => {
      const {loanStartTime, loanEndTime, orderNum, orderNumType, supportScore, supportDay} = value
      state.configForm = {
        loanStartTime: loanStartTime || "",
        loanEndTime: loanEndTime || "",
        orderNum: orderNum || "",
        orderNumType: orderNumType || 0,
        supportDay: supportDay,
        supportScore: supportScore
      }
    }, {immediate: true})
    /**
     * updateType 1 编辑 2 综合配置
     * @return {Promise<unknown>}
     */
    const confirmSubmit = async () => {
      return new Promise((resolve, reject) => {
        configFormRef.value.validate(async v => {
          if (v) {
            const {productId} = props.config
            const params = {
              ...state.configForm,
              productId,
              orderNum: parseInt(state.configForm.orderNum),
              supportScore: parseInt(state.configForm.supportScore),
              supportDay: state.configForm.supportDay || '',
              updateType: 2
            }
            const res = await updateProductConfig(params)
            if (res.code === 200) {
              ElMessage.success({
                message: '操作成功'
              })
              resolve(true)
            } else {
              reject(false)
            }
          }
        })

      })
    }
    const clearForm = () => {
      state.configForm = {
        loanStartTime: null,
        loanEndTime: null,
        orderNum: null,
        orderNumType: 0
      }
      configFormRef.value.resetFields()
    }
    return {
      configFormRef,
      ...toRefs(state),
      confirmSubmit,
      clearForm,
    }
  }
}
</script>

<style lang="less" scoped>
.card-header {
  padding: 15px 10px;

  .column {
    display: inline-block;
    height: 25px;
    width: 5px;
    background-color: #409eff;
    margin-right: 10px;
    padding-top: 5px;
    float: left;
    box-sizing: border-box;
  }
}
</style>
